{%  extends "base.html" %}
{% block content %}
<div class="row page" id="docs" style="display:block;">
        <div class="col-md-12" style="">
            <h3><i class="glyphicon glyphicon-leaf"></i> What is jsTree?</h3>
            {% include "base_index.html" %}

            <ul class="nav nav-tabs">
                <li><a href="/" class="nava">Overview</a></li>
                <li><a href="/doc/config" class="nava">Configuration</a></li>
                <li><a href="/doc/htmls" class="nava">HTML data</a></li>
                <li><a href="/doc/json" class="nava">JSON data</a></li>
                <li><a href="/doc/events" class="nava">Events</a></li>
                <li  class="active" id="selected_menu"><a href="/doc/interaction" class="nava">Interaction</a></li>
            </ul>
            <div class="tab-content">

                <div id="interaction" class="tab-content-item">

    <div class="row">
        <div class="col-md-12">
            <h3><i class="glyphicon glyphicon-leaf"></i> Invoking methods on an instance</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning">Please keep in mind that by default all modifications to the tree are
                prevented (create, rename, move, delete). To enable them set <a
                        href="/api/#/?q=check_callback&amp;f=$.jstree.defaults.core.check_callback">core.check_callback</a>
                to <code>true</code></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <p>To invoke a method on an instance you must obtain a reference of the instance and invoke the method. The
                example shows how to obtain a reference and invoke a method.</p>
            <p>Check the API for <a href="/api/#/?q=(">a list of available methods</a>.
        </div>
        <div class="col-md-4">
						<pre><code>
<span class="comment">// 3 ways of doing the same thing</span>
$('#jstree').jstree(true)
  .select_node('mn1');
$('#jstree')
  .jstree('select_node', 'mn2');
$.jstree.reference('#jstree')
  .select_node('mn3');
						</code></pre>
        </div>
        <div class="col-md-4">
            <div style="text-align:center; margin-bottom:1em;">
                <button class="btn btn-info" onclick="$('#using_methods').jstree(true).select_node('mn1');">select 1
                </button>
                <button class="btn btn-info" onclick="$('#using_methods').jstree('select_node', 'mn2');">select 2
                </button>
                <button class="btn btn-info" onclick="$.jstree.reference('#using_methods').select_node('mn3');">select
                    3
                </button>
            </div>
            <div id="using_methods" class="demo">
                <ul>
                    <li id="mn1">Node 1</li>
                    <li id="mn2">Node 2</li>
                    <li id="mn3">Node 3</li>
                </ul>
            </div>
            <script>
                $(function () {
                    $('#using_methods').jstree();
                });
            </script>
        </div>
    </div>

</div>
            </div>
<p style="text-align:center; margin-top:2em;"><a href="//old.jstree.com" target="_blank">click here for the old site (v.1)</a>
</p>
</div>
</div>
{% endblock %}